<template>

  <div class="app-container">

    <el-form ref="form" :model="form" label-width="150px" v-loading="loading">

      <el-form-item label="封面">
        <el-upload
          class="avatar-uploader"
          :action="host+'/guard/upload'"
          accept=".png,.jpg,.jpeg"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.cover_url" :src="host+form.cover_url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="使用单位">
        <el-input v-model="form.use_company" ></el-input>
      </el-form-item>
      <el-form-item label="灭火器规格型号">
        <el-input v-model="form.spec" ></el-input>
      </el-form-item>
      <el-form-item label="生产单位">
        <el-input v-model="form.prod_company" ></el-input>
      </el-form-item>
      <el-form-item label="生产日期">
        <el-date-picker
          v-model="form.prod_at"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="维修单位">
        <el-input v-model="form.repair_company" ></el-input>
      </el-form-item>
      <el-form-item label="维修日期">
        <el-date-picker
          v-model="form.repair_at"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="灭火器主要成分及含量">
        <el-input v-model="form.content" ></el-input>
      </el-form-item>
      <el-form-item label="筒体水压试验">
        <el-input v-model="form.test" ></el-input>
      </el-form-item>
      <el-form-item label="检验员">
        <el-input v-model="form.tester" ></el-input>
      </el-form-item>
      <el-form-item label="下次维修时间">
        <el-date-picker
          v-model="form.next_repair_at"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option value="1" label="有效"></el-option>
          <el-option value="2" label="无效"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
      </el-form-item>

      <el-form-item style="width: 150px;height: 150px" label="二维码" v-if="form.qr_code_url">
        <img :src="host+form.qr_code_url">
        <el-button @click="downloadQrCode">下载二维码</el-button>
      </el-form-item>


    </el-form>

  </div>


</template>

<script>
import { exportXls, myGet, myPost } from '@/utils/myUtils'
import E from 'wangeditor'

const urlAdd = '/guard/device/add'
export default {
  data() {
    return {
      host:process.env.VUE_APP_HOST,
      loading:false,
      form:{
        id:0,
        cover_url:'',
        use_company:'个体',
        spec:'手提式干粉灭火器',
        prod_company:'山东龙成科技股份有限公司',
        prod_at:'2021-12-25',
        repair_company:'临沂亿翔消防科技有限公司',
        repair_at:'2022-12-25',
        content:'磷酸二氢铵75% 硫酸铵15%',
        test:'2.1Mpa',
        tester:'王一翔',
        next_repair_at:'2023-12-25',
        status:'1',
        qr_code_url:''
      },
    };
  },
  methods:{

    downloadQrCode(){
      const url = this.host+'/guard/download?id='+this.form.id
      exportXls(url)
    },

    onSubmit(formName) {
      this.loading = true
      myPost(urlAdd,this.form).then(res => {
        this.loading = false
        if (res.status) {
          this.$message.success(res.msg)
          this.form.id = res.data.records.id
          this.form.qr_code_url = res.data.records.qr_code_url
        }
      })
    },

    handleAvatarSuccess(res, file) {
      if(res.status){
        //this.imageUrl = res.data.records.url
        this.form.cover_url = res.data.records.filePath
      }else{
        this.$message.error('上传失败!')
      }
    },

    beforeAvatarUpload(file) {
      /*const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;*/
      return true
    },

  },
}
</script>

<style >

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
